<template>
  <div>
    <a-popover v-model:visible="visible" title="图标选择器" trigger="click" placement="bottom">
      <template #content>
        <div style="width: 300px">
          <a-input v-model:value="typeName" placeholder="搜索图标" style="width: 200px"></a-input>
          <div class="icon-box">
            <template v-if="!search">
              <div
                :class="['icon-item', currentIndex === index ? 'active' : '']"
                v-for="(icon, index) in allIcon"
                :key="index"
                @click="handleClick(icon, index)"
              >
                <MyIcon :type="icon" class="custom-icon" />
              </div>
            </template>

            <template v-else>
              <Empty>
                  <template #description>
                      暂无数据
                  </template>
              </Empty>
            </template>
          </div>
        </div>
      </template>
      <slot name="iconContent"></slot>
      <!-- <div>图标选择</div> -->
    </a-popover>
  </div>
</template>
<script lang="ts">
import { AppContext, defineComponent, ref, SetupContext, watch } from 'vue';
import { Empty } from 'ant-design-vue';

const iconResource: string[] = [
  'icon-check-item',
  'icon-calendar',
  'icon-comment',
  'icon-column-vertical',
  'icon-column-horizontal',
  'icon-complete',
  'icon-chart-pie',
  'icon-cry',
  'icon-customer-service',
  'icon-delete',
  'icon-direction-down',
  'icon-copy',
  'icon-cut',
  'icon-data-view',
  'icon-direction-down-circle',
  'icon-direction-right',
  'icon-direction-up',
  'icon-discount',
  'icon-direction-left',
  'icon-download',
  'icon-electronics',
  'icon-drag',
  'icon-elipsis',
  'icon-export',
  'icon-explain',
  'icon-edit',
  'icon-eye-close',
  'icon-email',
  'icon-error',
  'icon-favorite',
  'icon-file-common',
  'icon-file-delete',
  'icon-file-add',
  'icon-film',
  'icon-fabulous',
  'icon-file',
  'icon-folder-close',
  'icon-filter',
  'icon-good',
  'icon-hide',
  'icon-home',
  'icon-history',
  'icon-file-open',
  'icon-forward',
  'icon-import',
  'icon-image-text',
  'icon-keyboard-26',
  'icon-keyboard-9',
  'icon-link',
  'icon-layout',
  'icon-fullscreen-shrink',
  'icon-layers',
  'icon-lock',
  'icon-fullscreen-expand',
  'icon-map',
  'icon-meh',
  'icon-menu',
  'icon-loading',
  'icon-help',
  'icon-minus-circle',
  'icon-modular',
  'icon-notification',
  'icon-mic',
  'icon-more',
  'icon-pad',
  'icon-operation',
  'icon-play',
  'icon-print',
  'icon-mobile-phone',
  'icon-minus',
  'icon-navigation',
  'icon-pdf',
  'icon-prompt',
  'icon-move',
  'icon-refresh',
  'icon-run-up',
  'icon-picture',
  'icon-run-in',
  'icon-pin',
  'icon-save',
  'icon-search',
  'icon-share',
  'icon-scanning',
  'icon-security',
  'icon-sign-out',
  'icon-select',
  'icon-stop',
  'icon-success',
  'icon-smile',
  'icon-switch',
  'icon-setting',
  'icon-survey',
  'icon-task',
  'icon-skip',
  'icon-text',
  'icon-time',
  'icon-telephone-out',
  'icon-toggle-left',
  'icon-toggle-right',
  'icon-telephone',
  'icon-top',
  'icon-unlock',
  'icon-user',
  'icon-upload',
  'icon-work',
  'icon-training',
  'icon-warning',
  'icon-zoom-in',
  'icon-zoom-out',
  'icon-add-bold',
  'icon-arrow-left-bold',
  'icon-arrow-up-bold',
  'icon-close-bold',
  'icon-arrow-down-bold',
  'icon-minus-bold',
  'icon-arrow-right-bold',
  'icon-select-bold',
  'icon-arrow-up-filling',
  'icon-arrow-down-filling',
  'icon-arrow-left-filling',
  'icon-arrow-right-filling',
  'icon-caps-unlock-filling',
  'icon-comment-filling',
  'icon-check-item-filling',
  'icon-clock-filling',
  'icon-delete-filling',
  'icon-decline-filling',
  'icon-dynamic-filling',
  'icon-intermediate-filling',
  'icon-favorite-filling',
  'icon-layout-filling',
  'icon-help-filling',
  'icon-history-filling',
  'icon-filter-filling',
  'icon-file-common-filling',
  'icon-news-filling',
  'icon-edit-filling',
  'icon-fullscreen-expand-filling',
  'icon-smile-filling',
  'icon-rise-filling',
  'icon-picture-filling',
  'icon-notification-filling',
  'icon-user-filling',
  'icon-setting-filling',
  'icon-switch-filling',
  'icon-work-filling',
  'icon-task-filling',
  'icon-success-filling',
  'icon-warning-filling',
  'icon-folder-filling',
  'icon-map-filling',
  'icon-prompt-filling',
  'icon-meh-filling',
  'icon-top-filling',
  'icon-home-filling',
  'icon-sorting',
  'icon-3column',
  'icon-column-4',
  'icon-add',
  'icon-add-circle',
  'icon-adjust',
  'icon-arrow-up-circle',
  'icon-arrow-right-circle',
  'icon-arrow-down',
  'icon-ashbin',
  'icon-arrow-right',
  'icon-browse',
  'icon-bottom',
  'icon-back',
  'icon-bad',
  'icon-arrow-double-left',
  'icon-arrow-left-circle',
  'icon-arrow-double-right',
  'icon-caps-lock',
  'icon-camera',
  'icon-chart-bar',
  'icon-attachment',
  'icon-code',
  'icon-close',
];
export default defineComponent({
    name:"a-icon-select",
   props:{
       defultValue:{
           type:String,
       }
   },
  components: { Empty },
  setup(props:any,ctx:SetupContext) {
    const search = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const typeName = ref<string>('');
    const currentIndex = ref<number>(1);
    const allIcon = ref<string[]>([]);
    const handleClick = (icon: string, index: number): void => {
      currentIndex.value = index;
      ctx.emit('icon-change',allIcon.value[index]);
    };
    if(props.defultValue){
        currentIndex.value = iconResource.findIndex(item=>item === props.defultValue);
        
    }
    watch(
      () => typeName.value,
      val => {
        const res:any = iconResource.filter(item => item.indexOf(val) !== -1);
        // console.log(res);
        if (res.length === 0) {
          search.value = true;
        }else if(res === ''){
            allIcon.value = iconResource;
            search.value = false;
        }else{
            allIcon.value = res;
            search.value = false;
        }
      },
      {
          immediate:true
      }
    );
    return {
      handleClick,
      typeName,
      visible,
      allIcon,
      currentIndex,
      search,
    };
  },
});
</script>

<style scoped lang="less">
.icon-box {
  height: 200px;
  overflow: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .active {
    border-color: #0960bd !important;
  }
  .icon-item {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f5f5f5;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 10px;
    transition: all 0.4s;
    .custom-icon {
      font-size: 20px;
    }
    &:hover {
      border-color: #0960bd;
    }
  }
}
</style>
